<template>
	<view :style="{height: wh +'px'}" class="page-box">
		<view class="box">
			<view class="header-box">
				<view class="">
					<image src="../../static/headerImg.png" mode="widthFix"></image>
					</image>
					<text>{{userInfo.name ||'微信用户'}}</text>
				</view>
			</view>
			<view class="grid-box">
				<uni-grid :column="4" :highlight="true" @change="handleChange">
					<uni-grid-item v-for="(item, index) in list" :index="index" :key="index">
						<view class="grid-item-box" style="background-color: transparent;">
							<view class="">
								{{userInfo[myGridFilter(item)] || 0}}
							</view>
							<text class="text">{{item}}</text>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
			<uni-group title="快捷工具" mode="card" class="tool">
				<view class="item" v-for="(item,index) in toolList" :key="index">
					<view>
						<uni-icons :type="item.icon"></uni-icons>
						<text>{{item.name}}</text>
					</view>
					<uni-icons type="forward"></uni-icons>
				</view>
			</uni-group>
			<uni-group mode="card" class="tool">
				<view class="item">
					<view>
						<uni-icons type="info-filled"></uni-icons>
						<text>关于我们</text>
					</view>
					<uni-icons type="forward"></uni-icons>
				</view>
				<view class="item">
					<view>
						<uni-icons type="wallet"></uni-icons>
						<text>更新日志</text>
					</view>
					<uni-icons type="forward"></uni-icons>
				</view>
				<view class="item">
					<view>
						<uni-icons type="contact"></uni-icons>
						<text>联系客服</text>
					</view>
					<uni-icons type="forward"></uni-icons>
				</view>
			</uni-group>
		</view>
	</view>
</template>

<script>
	import {
		getUserInfoApi
	} from '../../common/api/user.js'
	import {
		myGridFilter
	} from '../../utils/filter.js'
	export default {
		components: {},
		data() {
			return {
				list: ['我的答题', '我的用药', '我的订单', '我的服务'],
				wh: 0,
				toolList: [{
					name: '地址管理',
					icon: 'location-filled',
				}, {
					name: '头像管理',
					icon: 'person',
				}, {
					name: '昵称管理',
					icon: 'home',
				}, {
					name: '更多详情',
					icon: 'hand-up',
				}],
				userInfo: {}
			};
		},
		methods: {
			handleChange(data) {
				const index = data.detail.index
				if (index === 0) {
					uni.navigateTo({
						url: '/subpkg/AnswerRecord/AnswerRecord'
					})
				} else if (index === 1) {
					uni.navigateTo({
						url: '/subpkg/medication/medication'
					})
				}
			},
			async getUserInfo(callback) {
				const res = await getUserInfoApi()
				this.userInfo = res.data
				callback && callback()
			},
			myGridFilter(item) {
				return myGridFilter(item)
			}
		},
		onLoad() {
			this.getUserInfo()
			let getWindowInfo = uni.getWindowInfo()
			this.wh = getWindowInfo.windowHeight
		},
		onPullDownRefresh() {
			this.getUserInfo(uni.stopPullDownRefresh)
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: 100%;
	}


	.page-box {
		padding-top: 150rpx;
		background: -webkit-linear-gradient(top, rgba(90, 239, 125, 0.9), #fff);
	}

	/deep/ .uni-grid-item--border-top {
		border: 0;
	}

	/deep/ .uni-group__title {}

	.box {
		button {
			margin: 0 30rpx;
		}

		.header-box,
		.grid-box {
			padding: 0 30rpx;
		}

		.header-box {
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 100rpx;
				height: 100rpx;
				margin-right: 20rpx;
				border-radius: 50rpx;
				vertical-align: middle;
			}

			text {
				height: 100rpx;
				line-height: 100rpx;
			}
		}

		.grid-box {
			.grid-item-box {
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}
		}

		.order-box {
			.items {
				display: flex;
				justify-content: space-between;

				.order-item {
					display: flex;
					flex-direction: column;
					justify-content: center;
				}
			}
		}
	}

	.tool {
		.item {
			display: flex;
			justify-content: space-between;
			padding-bottom: 10rpx;
			margin-top: 10rpx;

			text {
				padding-left: 10rpx;
			}

			border-bottom: 2rpx solid #eeeeee;

			&:nth-child(1) {
				margin-top: 0;
			}
		}
	}

	.avatar-wrapper {
		height: 60rpx;
		background-color: #fff;
		text-align: center;
		font-size: 32rpx;
		font-weight: normal;
		line-height: 60rpx;
		border-radius: 30rpx;
		border: 2rpx solid #00c8aa;
		color: #00c8aa;
	}

	/deep/ .uni-grid {
		border: 0;
	}
</style>
